<style>
	.groups .item {
		position:relative;
		float:left;
		width: 300px;
		height: 220px;
		padding-right: 10px;
		padding-bottom: 10px;
	}
	
	.groups div img {
		border: 0px;
	}
	
	.groups a.img {
		display:block;
		width: 150px;
		height: 150px;
		text-align: center;
		background-color: white;
		border: 4px solid #82a21d;
		border-top: 21px solid #82a21d;
		margin-bottom: 10px;
	}
	
	.groups div .nm {
		font-weight: bold;
	}
	
	
	.products {
		padding-top:30px;
	}
	
	.products .item {
		clear:both;
	}
	
	.products .item a img {
		border: 0px;
	}
	
	.products .img {
		width: 110px;
		height: 110px;
		text-align:center;
		float:left;
	}
</style>

{include 'crumbs.tpl'}

{article_search groupId=$group.id}
{attribute_search group=$group.code}

<div class='groups'>
{foreach $groups as $group}
	{strip}
		<div class='item'>
			<a href='/catalog{$group.path}' class='img'>
				<img src='{thumbnail width=150 height=150}{if $group.image}{$group.image}{else}group_images/default.jpg{/if}{/thumbnail}' />
			</a>
			<a href='/catalog{$group.path}' class='nm'>{$group.name}</a>
		</div>
	{/strip}
{/foreach}
</div>
<div style='clear:both;'></div>

<div class='products'>
	{foreach $products as $product}
		<div class='item'>
			{strip}
			<a href='/products/{$product->code()}'>
				<div class='img'>
					<img src='{thumbnail width=100 height=100}{if $product->image()}{$product->image()}{else}product_images/default.jpg{/if}{/thumbnail}' />
				</div>
				<span>{$product->fullName()}</span>
			</a>
			{/strip}
		</div>
	{/foreach}
</div>

